<template>
  <div ref="codeContainer" class="coder-editor"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      monacoEditor: null, // 语言编辑器
    }
  },
  watch: {
    value: {
      handler(val) {
        this.monacoEditor?.setValue(val)
      },
      immediate: true,
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.monacoEditor.dispose();
  },
  methods: {
    init() {
      if (this.$refs.codeContainer) {
        // 初始化编辑器，确保dom已经渲染
        this.monacoEditor = monaco.editor.create(this.$refs.codeContainer, {
          value: this.value, // 编辑器初始显示文字
          language: 'json', // 语言
          automaticLayout: true, // 自动布局
          theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
          minimap: { // 关闭小地图
            enabled: false,
          },
          lineNumbers: 'off', // 隐藏控制行号
        });
      }
    },
    getValue() {
      return this.monacoEditor.getValue()
    }
  }
}
</script>

<style lang="scss" scoped>
.coder-editor {
  width: 100%;
  height: 700px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
</style>
